<template>
	<view class="container bg">
		<view class="searchbox">
			<u-search
			  placeholder="请输入藏品名称"
			  search-icon-color="#fff"
			  v-model="searchStr"
			  placeholder-color="#999"
			  color="#fff"
			  bg-color="rgb(25,27,26)"
			  :show-action="false"
			  @search="toSearch"
			></u-search>
		</view>
		<!-- <view class="history plr-30 pt-20 white">
			<view class="historytit">
				历史搜索
			</view>
			<view class="historycont">
				<view class="historyitem" @click="clickfn($event)">
					赏金令
				</view>
			</view>
		</view> -->
		<view class="allcollect plr-30">
		  <empty v-if="collectList.length == 0"></empty>
		  <view style="" v-else v-for="(item, index) in collectList" :key="index" @click="goDetails(item.id)" class="collectitem">
		    <view class="collectItem mb-30 size-22">
		      <image class="collectImg" :src="item.image" mode="widthFix"></image>
		      <view v-if="item.status == 1" class="itemTips status1 plr-8 ptb-8" >
		        {{ item.status_text }}
		      </view>
		      <view class="itemTips2 plr-8 ptb-8" v-if="item.status == 2">
		       <!-- {{ item.status_text }} -->
							<image src="../../static/sell-out.png" mode="widthFix" class="sellout"></image>
		      </view>
		      <view class="flex flex-start itemTips plr-8 ptb-8" v-if="item.status == 3" style="color: #9fc58c; background: #161912">
		        <!-- <image src="../../static/time.png" class="timeImg mr-8"></image> -->
		        <view class="">
		          {{ item.status_text }}
		        </view>
		      </view>
		      <view class="itemTips plr-8 ptb-8 flex center" v-if="item.status == 4" style="background: linear-gradient(to right, #cf58e5, #fc76d5)">
		        <view class="">
		          {{ item.status_text }}
		        </view>
		        <u-count-down
		          :timestamp="item.diff_time"
		          bg-color="background:transparent"
		          color="#fff"
		          font-size="24"
		          separator-color="#fff"
		          style="margin-left: 5rpx"
		        ></u-count-down>
		      </view>
		      <view class="plr-30 ptb-30">
		        <view class="flex flex-start">
		          <view class="size-34 gray workname">
		            {{ item.name }}
		          </view>
		          <!-- <image src="../../static/homeIcon.png" class="homeIcon ml-20" mode=""></image> -->
		        </view>
		        <view class="mtb-20 flex flex-start">
		          <view class="tipsLeft mr-20 plr-10 ptb-7 radius-6" style="color: #fff">
		            {{ item.goods_category_name }}
		          </view>
		          <view class="flex flex-start mr-20">
		            <view class="tipsLeft plr-10 ptb-7 radius-6" style="color: #fff"> 限量 </view>
		            <view class="tipsRight red ptb-7 plr-5" style="border-radius: 0 6rpx 6rpx 0">
		              {{ item.stock }}
		            </view>
		          </view>
		          <!-- <view class="tipsRight ptb-7 red plr-20 radius-6">
		            {{ item.label }}
		          </view> -->
		        </view>
		        <view class="flex flex-between" style="margin: 10rpx 0;">
		          <view class="flex flex-start">
		            <image :src="item.author_image" class="userImg"></image>
		            <view class="size-24 gray ml-24 author">
		              {{ item.author_name }}
		            </view>
		          </view>
		        </view>
						  <view class=" size-30" style="color: #fff;"> ￥{{ item.price }} </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchStr: '',
				page: 1,
				collectList: [],
				flag: false, //上拉加载
				status: 'more',
			}
		},
		onShow() {
		  // this.init();
		},
		methods: {
			
			goDetails(id) {
			  uni.navigateTo({
			    url: './homeDetails?id=' + id
			  });
			},
			toSearch() {
			  this.searchStr=this.searchStr.trim()
			  if(this.searchStr==''){
				  this.collectList=[]
				  uni.showToast({
				  	title: "请输入藏品名称",
				  	icon: 'none'
				  })
				  return;
			  }else{
				  this.page = 1;
				  this.collectList = [];
				  this.$http('api/goods/goodsListSearch', { name: this.searchStr }).then(res => {
				    uni.stopPullDownRefresh();
				    let data = res.data;
				    if (data.length == 0) {
				      this.flag = true;
				      this.status = 'noMore';
				    } else {
				      this.collectList = this.collectList.concat(data);
				      if (data.length < 10) {
				        this.flag = true;
				        this.status = 'noMore';
				      }
				    }
				  });
			  }
			  
			},
			init() {
			  this.$http('api/goods/goodsList', {
			    page: this.page,
			    pagesize: 10,
			    search: this.searchStr
			  }).then(res => {
			    uni.stopPullDownRefresh();
			    let data = res.data;
			    if (data.length == 0) {
			      this.flag = true;
			      this.status = 'noMore';
			    } else {
			      this.collectList = this.collectList.concat(data);
			      if (data.length < 10) {
			        this.flag = true;
			        this.status = 'noMore';
			      }
			    }
			  });
			},
		}
	}
</script>

<style lang="less" scoped>
.collectImg {
  width: 100%;
  height: 690rpx;
}
.userImg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}
.container{
	width: 100%;
	min-height: 100vh;
	// margin-top: -20rpx;
	.searchbox{
		width: 90%;
		margin: 0 auto;
	}
}
.history{
	.historytit{
		font-size: 33rpx;
		font-weight: 600;
	}
	.historycont{
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.historyitem{
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			background-color: #666;
		}
	}
}
.allcollect{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.collectitem{
		background-color: #000;
		margin-top: 20rpx;
		position: relative;
		width: 48%;
		.collectItem{
			.itemTips{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				// border-radius: 50%;
				color: #fff;
				// font-size: 22rpx;
				z-index: 100;
			}
			.itemTips2{
				width: 110rpx;
				height: 110rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				// border-radius: 50%;
				color: #fff;
				// font-size: 22rpx;
				z-index: 100;
				.sellout{
					  width: 120%;
				}
			}
			.status1{
				background: linear-gradient(to right, rgb(68, 172, 255), rgb(68, 172, 255));
				border-radius: 20rpx;
			}
		}
		
	}	
	.workname{
		color: #fff;
	}
	.author{
		color: #fff;
	}
}
</style>
